import React, { useState, useEffect } from 'react'
import Add from '../components/type/Add';
import List from '../components/type/List';

import { setPagination, isModalVisible, } from '../store/slices/typeSlice';
import { useSelector, useDispatch } from "react-redux";
import { findType } from '../services/type'
import Update from '../components/type/Update';
export default function Type() {
    let [type, setType] = useState([]);
    // 分页
    let [pagination, setPagination] = useState({
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: [5, 10, 15, 20],
        showTotal: total => `共 ${total} 条`,

    });
    let [searchObj, setSearchObj] = useState([]);

    const show = async (obj) => {
        // 如果有条件就把当前条件给searchObj
        if (obj) {
            console.log("Type:", obj);
            // 如果没有页码
            if (!obj.current) {

                obj.current = 1;
                obj.pageSize = obj.pageSize;
            }
            // 当搜索后点击下一页依旧是不满足条件的数据
            // 所以我们要把点下一页时也要带上条件，同时还要带上页码
            obj = { ...searchObj, ...obj }
            // 注：setSearchObj是一个异步方法
            setSearchObj(obj);
        } else {
            // 把保存得searchObj（[]）的值给obj
            obj = searchObj;
        }
        let data = await findType(obj);
        // console.log("data-----TYpe:", data);
        // console.log(data.rows[0].isShow, "data.rows.");
        if (data) {
            let dataTrue = data.rows.map((item) => {
                if (item.isShow == true) {
                    return item;
                } else {
                    return { ...item, typeName: item.typeName + "(该类型若要使用先修改)" }
                }
            })
            console.log("dataTrue", dataTrue);
            setType(dataTrue);

        }

        setPagination({ ...pagination, total: data.total, pageSize: data.pageSize });
        // console.log("pagination:", pagination);
    }


    useEffect(() => {
        show();
    }, [type.length])
    return (
        <div>
            <Add show={show} />
            <List type={type} show={show} pagination={pagination} />
            <Update show={show}></Update>
        </div>
    )
}
